<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage, FormInstance, FormRules } from "element-plus";
import "element-plus/es/components/message/style/css";
import { userApply } from "@/network/api"

let Data = reactive({
    form: {
        name: "",
        mobile: "",
        company: "",
        remark: "",
        services: ""
    },
    serviceList: [] as any,
    dialogShow: false,
    contactInfo: {
        mobile: '13936726157',
        email: '13936726157@gmail.com'
    }
})

let ServiceData = ['易招商', '资管云', '产服云', '分析云', '其他订制需求']


const handleCheckChange = (val: any) => {
    if (Data.serviceList.includes(val)) {
        Data.serviceList.splice(Data.serviceList.indexOf(val, 1))
    } else {
        Data.serviceList.push(val)
    }
}

const rules = reactive<FormRules>({
    mobile: [
        { required: true, message: "请输入手机号码", trigger: "blur" },
        { min: 11, max: 11, message: '手机号码格式不正确', trigger: 'blur' },
    ],
})

const formRef = ref<FormInstance>();

const handleOpen = () => {
    Data.dialogShow = true
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    Data.form.services = ""
    formEl.resetFields();
    Data.dialogShow = false;
};

const submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate(async (valid) => {
        if (valid) {
            if (Data.serviceList.length > 0) {
                Data.form.services = Data.serviceList.join(',')
            }
            await userApply(Data.form)
            ElMessage({
                message: '申请成功，请等待工作人员联系',
                type: 'success'
              })
            Data.dialogShow = false
            Data.form.services = ""
            Data.serviceList = []
            formEl.resetFields();
        }
    })
}

defineExpose({ handleOpen })

</script>

<template>
    <div class="contactModal">
        <el-dialog v-model="Data.dialogShow" title="提交后，我们将有专人与您联系" class="bigTitle" :align-center="true">
            <div class="contactInfoBox">
                <div class="contactInfo">
                    <i class="iconfont icon-24gf-telephone2 contactIcon"></i>
                    <div>13936726157</div>
                </div>
                <div class="contactInfo">
                    <i class="iconfont icon-youxiang1 contactIcon"></i>
                    <div>13936726157@gmail.com</div>
                </div>
            </div>
            <el-form ref="formRef" :model="Data.form" :rules="rules">
                <el-form-item prop="name">
                    <el-input v-model="Data.form.name" placeholder="称呼" autocomplete="off" />
                </el-form-item>
                <el-form-item prop="mobile">
                    <el-input class="contact_phone" v-model="Data.form.mobile" placeholder="电话" autocomplete="off" />
                </el-form-item>
                <el-form-item prop="company">
                    <el-input v-model="Data.form.company" placeholder="公司名称" autocomplete="off" />
                </el-form-item>
                <div class="flex justify_between align_center checkBox" v-if="Data.dialogShow">
                    <div class="checkBoxTitle">服务项目(可多选)</div>
                    <div class="flex-1">
                        <!-- <el-checkbox-group> -->
                        <el-checkbox v-for="service in ServiceData" :key="service" :label="service"
                            :checked="Data.serviceList.includes(service) ? true : false"
                            @change="handleCheckChange(service)">{{
                                service
                            }}</el-checkbox>
                        <!-- </el-checkbox-group> -->
                    </div>
                </div>
                <el-form-item prop="remark">
                    <el-input v-model="Data.form.remark" :rows="8" type="textarea" placeholder="补充信息" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" color="#DADADD" round @click="resetForm(formRef)">取消</el-button>
                    <el-button size="large" color="#064DD6" round @click="submit(formRef)">提交</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.contactInfoBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .contactInfo {
        width: 48%;
        background: #F5F5F7;
        display: flex;
        align-items: center;
        padding: 24px 20px;
        font-size: 16px;

        .contactIcon {
            color: #064DD6;
            font-size: 27px;
            margin-right: 20px;
        }
    }
}

.contact_phone::before {
    content: "*";
    color: #f56c6c;
    line-height: 45px;
    position: absolute;
    left: -20px;
}

.checkBox {
    margin-bottom: 20px;

    .checkBoxTitle {
        font-size: 16px;
        font-family: alibabapuhuitiRegular;
        font-weight: 500;
        padding: 0 30px 0 20px;
    }
}


:deep(.el-dialog__title) {
    font-size: 20px;
    color: #1d1d1f;
    font-family: alibabapuhuitiBold;
}

:deep(.el-input) {
    height: 45px;
}

.foor_btn {
    margin-left: 30px;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
    border-radius: 0px;
}

:deep(.el-input__inner::placeholder),
:deep(.el-textarea__inner::placeholder) {
    color: #6e6e73ff;
    font-size: 16px;
}

:deep(.el-dialog) {
    border-radius: 15px;
    width: 50%;
}

:deep(.el-dialog__header) {
    margin: 0 50px;
    padding: 30px 0 20px 0;
}

:deep(.el-dialog__body) {
    margin: 0 50px;
    padding: 0 0;
}

:deep(.el-dialog__footer) {
    text-align: center;
    margin-top: -20px;
    height: 90px;
}

:deep(.el-button) {
    height: 40px;
    width: 150px;
    border-radius: 26px;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
    font-size: 20px;
}

:deep(.el-checkbox__label) {
    font-size: 16px;
    font-family: alibabapuhuitiRegular;
}

:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
    color: #064DD6;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #064DD6;
}

:deep(.el-checkbox-group) {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


@media screen and (max-width: 450px) {
    :deep(.el-dialog) {
        width: 92%;
    }

    :deep(.el-dialog__header) {
        margin: 0 20px;
    }

    :deep(.el-dialog__body) {
        margin: 0 20px;
    }

    .checkBox {
        flex-wrap: wrap;
    }

    .contact_phone::before {
        left: -10px;
    }
}
</style>